<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr />
    <textarea placeholder="请输入要bb的内容(最多吐槽120个字)" maxlength="120" ></textarea>
    <!-- <textarea placeholder="请输入要bb的内容(最多吐槽120个字)" maxlength="120" v-model="msg"></textarea> -->

    <mt-button type="primary" size="large" >发表评论</mt-button>
    <!-- <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button> -->
    <!-- <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
        <div
          class="cmt-title"
        >第{{ i+1 }}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;时间：{{item.add_time | dateFormat}}</div>
        <div class="cmt-body">{{item.content === "undefined"?"此用户很懒，啥都没说":item.content}}</div>
      </div>
    </div> -->
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;时间：2012-12-12 12:12:12</div>
        <div class="cmt-body">鹅鹅鹅，曲项向天歌...</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;时间：2012-12-12 12:12:12</div>
        <div class="cmt-body">鹅鹅鹅，曲项向天歌...</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;时间：2012-12-12 12:12:12</div>
        <div class="cmt-body">鹅鹅鹅，曲项向天歌...</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;时间：2012-12-12 12:12:12</div>
        <div class="cmt-body">鹅鹅鹅，曲项向天歌...</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">第一楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;时间：2012-12-12 12:12:12</div>
        <div class="cmt-body">鹅鹅鹅，曲项向天歌...</div>
      </div>
    </div>
    <!-- <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button> -->
    <mt-button type="danger" size="large" plain >加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
    //   pageIndex: 1, //默认展示第一页数据
    //   comments: []
      // message: "",
      // comments: []
    };
  },
//   created() {
//     this.getComments();
//   },
  methods: {
    // getComments() {//获取评论
    //   this.$http
    //     .get("api/getcomments/:" + this.id + "?pageindex=" + this.pageIndex)
    //     .then(result => {
    //       if (result.body.status === 0) {
                // 每当获取新评论数据时，不要将老数据清空，而是采用老数据拼接新数据
    //         this.comments = this.comments.concat(result.body.message);
    //       } else {
    //         Toast("获取评论失败");
    //       }
    //     });
    // }
        // getMore(){//加载更多
        //     this.page++;
        //     this.getComments();
        // }
        // postComment(){
        //   if(this.msg.trim().length === 0){
        //    return Toast("评论内容不能为空")
        //    this.$htttp.post('api/postcomment/'+this.$route.params.id,{content: this.msg.trim()})
        //    .then(result => {
        //      if(result.body.status === 0){
        //        var cmt = {
        //          user_name: "匿名用户",
        //          add_time: Date.now(),
        //          content: this.msg.trim()
        //        }
        //        this.comments.unshift(cmt)
        //       //  清空message
        //        this.message= "";

        //      }else{
        //        Toast("提交评论失败!")
        //      }
        //    })
        //   }
        // }
  },
  props: ["id"]
}
</script>

<style lang="scss" scoped>
.cmt-container {
  h3 {
    font-size: 18px;
  }
  textarea {
    margin: 0;
    font-size: 14px;
    height: 85px;
  }
  .cmt-list {
    margin: 5px 0;
    .cmt-item {
        line-height: 35px;
      font-size: 13px;
      .cmt-title {
        background-color: #ccc;
        height: 35px;
        
      }
      .cmt-body {
        height: 35px;
        text-indent: 2em;
      }
    }
  }
}
</style>